<template>
  <div style="float: right">
    <Button color="red" @click="opened = true" v-if="isDeletable">
      <i class="h-icon-trash"></i>
    </Button>
    <!--  IS A （是一个XX东西、继承）/ HAS A (有一个XX东西、组合) -->
    <Modal v-model="opened">
      <div slot="header">是否要删除角色？</div>
      <div>角色【{{outData.currentRole.name}}】被删除以后，不可恢复！</div>
      <div slot="footer">
        <button class="h-btn" @click="confirm">确定</button>
        <button class="h-btn" @click="opened = false">取消</button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "axios";
export default {
  // 使用此元素/组件的时候，需要传入的属性名称
  props: ["outData", "role", "callback"],
  data() {
    return {
      opened: false
    };
  },
  methods: {
    confirm() {
      axios
        .delete(`/api/user-center/role/${this.outData.currentRole.id}`)
        .then(response => {
          let type = response.data.code === 1 ? "success" : "error";
          this.$Message({ type: type, text: response.data.message });
          if (response.data.code === 1) {
            //this.loadRoles();
            this.callback();
          }
        });
    }
  },
  // 计算属性，也是一个函数，只是作为属性来被使用
  computed: {
    isDeletable() {
      return (
        this.outData.currentRole &&
        this.outData.currentRole.id &&
        this.outData.currentRole.id === this.role.id &&
        this.role.builtIn === false
      );
    }
  }
};
</script>